<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementui.js"></script>
    <link rel="stylesheet" href="css/index.css">
    </link>
</head>

<body>
    <div id="app">
        <template>
            <div class="login-container">
                <el-card class="login-card" shadow="hover">
                    <h2 class="login-title">登录</h2>
                    <el-form :model="loginForm" ref="loginForm" label-width="80px">
                        <el-form-item label="用户名" prop="uname">
                            <el-input v-model="loginForm.uname" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="upwd">
                            <el-input type="password" v-model="loginForm.upwd" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </template>
    </div>
    <style scoped>
        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
        }

        .login-card {
            width: 400px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.9);
            animation: fadeInUp 1s ease-out;
        }

        .login-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-button--primary {
            background: #ff7e5f;
            border-color: #ff7e5f;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            loginForm: {
                uname: '',
                upwd: ''
            },
            rules: {
                uname: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                upwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }

        }, methods: {
            handleLogin() {
                //判断账号是否为空
                if (this.loginForm.uname == '') {
                    this.$message.error('用户名不能为空');
                    return false;
                }
                //判断密码是否为空
                if (this.loginForm.upwd == '') {
                    this.$message.error('密码不能为空');
                    return false;
                }
                console.log(this.loginForm);
                axios.post('http://localhost:8080/login1', this.loginForm).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        let token = res.data.data.token;
                        this.$message.success("登录成功!正在跳转...");
                        setTimeout(() => {
                            window.localStorage.setItem("token", token)
                            location.href = 'menu.html'
                        }, 1000);
                    } else {
                        this.$message.error("账号或密码错误!");
                    }
                })
            }
        }
    })
</script>

</html>